<!--  :placeholder="ruleItem.hint" -->
<template>
  <div class="rule-item-css">
    <div v-text="ruleItem.textBefore"></div>
    <el-select v-model="params[ruleItem.fields]"
               placeholder=""
               size="mini"
               multiple
               clearable
               filterable
               default-first-option
               v-loading="loading"
               element-loading-spinner="el-icon-loading"
               collapse-tags
               @change="selectchange"
               :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
               class="select-box">
      <el-option label="Select All" value="Select All" style="text-align: center"></el-option>
      <el-option v-for="(o,ii) in sort(selectDataObj[`${ruleItem.fields}ListsOrigin`],ruleItem.selectLabel)"
                 :key="ii"
                 :value="o[ruleItem.selectValue]"
                 :label="o[ruleItem.selectLabel]"></el-option>
    </el-select>
    <div v-html="ruleItem.textAfter"></div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/next-ticket-rule-view-module'
import { Cascader } from './cascader'
export default {
  mixins: [mixinTypeViewModule],
  props: {
    parentIndex: {
      type: Number
    },
    currIndex: {
      type: Number
    },
    currLabelIndex: {
      type: Number
    }
  },
  data () {
    return {
      receiveParams: {},
      currData: null
    }
  },
  created () {
    this.initCascaderEvent()
    this.EchoEvent()
  },

  /** ==================== MB-15152 START ==================== */
  mounted () {
    const { get } = this._
    const value = get(this.params, get(this.ruleItem, 'fields'), [])
    if (value.length > 0 && this.ruleItem.emitCascaderId) {
      Cascader.$emit(`cascader${this.currIndex}${this.params.onlyId}${this.ruleItem.emitCascaderId}`, value)
    }
  },
  /** ==================== MB-15152 END ==================== */

  methods: {
    sort (val, o) {
      val = this._.cloneDeep(val)
      // val = val.map(e => e)
      if (val) {
        var temp = val.sort(function (a, b) {
          if (a && b) return a[o].localeCompare(b[o])
        })
        return temp
      }
    },
    EchoEvent () {
      if (this.ruleItem.urlParams && this.ruleItem.urlParams.length > 0 && this.params[this.ruleItem.fields] && this.params[this.ruleItem.fields].length > 0) {
        let keyList = this.ruleItem.urlParams
        let params = {}
        for (let index = 0; index < keyList.length; index++) {
          const element = keyList[index]
          params[element] = this.params[element]
        }
        this.getSelectDataLists({
          ...this._.cloneDeep(this.ruleItem),
          searchKey: params
        })
      }
    },
    initCascaderEvent () {
      if (this.ruleItem.receiveCascaderId) {
        Cascader.$on(`cascader${this.currIndex}${this.params.onlyId}`, (data) => {
          if (this.currLabelIndex > data) {
            this.params[this.ruleItem.fields] = []
            this.selectDataObj[`${this.ruleItem.fields}ListsOrigin`] = []
          }
        })
        Cascader.$on(`cascader${this.currIndex}${this.params.onlyId}${this.ruleItem.receiveCascaderId}`, (data) => {
          let keyList = this.ruleItem.urlParams
          let params = {}
          let flag = true
          for (let index = 0; index < keyList.length; index++) {
            const element = keyList[index]
            if (this.params[element].length > 0) {
              params[element] = this.params[element]
            } else {
              flag = false
              break
            }
          }
          if (flag) {
            this.getSelectDataLists({
              ...this.ruleItem,
              searchKey: params
            })
          }
        })
      }
    },
    selectchange (val) {
      if (val instanceof Array) {
        const selectOption = this.sort(this.selectDataObj[`${this.ruleItem.fields}ListsOrigin`], this.ruleItem.selectLabel)
        const allValue = selectOption.map(item => item[this.ruleItem.selectValue])
        if (val.includes('Select All') && val.length - 1 === selectOption.length) {
          this.params[this.ruleItem.fields] = []
        } else {
          if (val.includes('Select All')) {
            this.params[this.ruleItem.fields] = allValue
          } else {}
        }
      }
      Cascader.$emit(`cascader${this.currIndex}${this.params.onlyId}`, this.currLabelIndex)
      if (this.ruleItem.emitCascaderId) Cascader.$emit(`cascader${this.currIndex}${this.params.onlyId}${this.ruleItem.emitCascaderId}`, val)
    }
  },
  destroyed () {
    Cascader.$off(`cascader${this.currIndex}${this.params.onlyId}${this.ruleItem.receiveCascaderId}`)
  }
}
</script>

<style scoped lang='scss'>
.rule-item-css {
  display: flex;
  justify-content: flex-start;
  .select-box {
    margin: 0 10px;
  }
}
::v-deep .el-loading-spinner {
  top: 66%;
  left: 20px;
  text-align: left;
}
</style>
